import { NavBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import NewsItem from '../../components/NewsItem'
import { API, getCity } from '../../utils'

import styles from './index.module.css'

export default function News({ history }) {
  const [newsList, setNewsList] = useState([])

  useEffect(() => {
    // 获取当前定位城市id
    const id = getCity().value

    // 获取资讯数据
    async function getNewsList() {
      const { data: res } = await API.get(`/home/news?area=${id}`)
      setNewsList(res.body)
    }
    getNewsList()
  }, [])

  return (
    <div className={styles.root}>
      <NavBar onBack={() => history.go(-1)}>最新资讯</NavBar>

      {/* 资讯列表 */}
      <div className={styles.newsList}>
        {newsList.map(item => (
          <NewsItem key={item.id} news={item} />
        ))}
      </div>
    </div>
  )
}
